
/**
 * 生成登记表
 */

import { Button, Image,  Modal } from "antd";
import { FC} from "react";
import { DengjiBox } from "../../style";
import { basicIp } from "../../../../../api/http";
import {DownloadOutlined} from '@ant-design/icons'
const RegistrationForm:FC<{
    registerShow: boolean
    handleCallback: () => void
    clickData:any
}> = ({registerShow,handleCallback,clickData}) => {

    const handleDownload = ()=>{
        const imageUrl = basicIp + '/plan/generateCode?planId=' + clickData.id; // 图片地址
        fetch(imageUrl)
            .then(response => response.blob()) // 将图片地址转换为 Blob
            .then(blob => {
                const link = document.createElement('a'); // 创建一个 <a> 元素
                const url = window.URL.createObjectURL(blob); // 创建一个临时 URL
                link.href = url; // 设置链接的 href 为 Blob 的 URL
                link.download = '二维码.png'; // 设置下载文件的默认名称
                document.body.appendChild(link); // 将 <a> 元素添加到 DOM 中
                link.click(); // 触发点击事件
                document.body.removeChild(link); // 下载完成后移除 <a> 元素
                window.URL.revokeObjectURL(url); // 释放 URL 对象
            })
            .catch(err => {
                console.error('下载失败:', err);
            });
    }

    return (
        <div>
            <Modal open={registerShow} 
                title="生成二维码" 
                onCancel={handleCallback} 
                footer={<Button onClick={handleCallback}>取消</Button>}>
                {clickData&&<DengjiBox>
                    <div className="qrcode">
                        <Image className="qrcode-img" src={basicIp+'/plan/generateCode?planId='+clickData.id} alt="" />
                        <Button type="link" onClick={handleDownload} icon={<DownloadOutlined />}>保存二维码</Button>
                    </div>
                    <div className="text">
                        <div>二维码有效期:<Button type="link">此刻 至 {clickData?.stopDate}(计划截止日期)</Button>每点击生成一次就会重新生成一次，并覆盖原二维码信息</div>
                    </div>
                </DengjiBox>}
            </Modal>
        </div>
    )
};

export default  RegistrationForm;